* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}

.bg {
	position: fixed !important;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url(../img/ydn.jpg);
	background-repeat: no-repeat;
	background-size: auto 100%;
	-moz-background-size: auto 100%;
	z-index: -1;
}

.logo {
	height: 10vh;
	width: 100%;
	position: fixed;
	top: 2vmin;
	left: 5vw;
	width: 100%;
	color: #FFF;
	font-weight: bolder;
	font-size: 5vmin;
	line-height: 10vh;
	vertical-align: middle;
	-webkit-text-stroke: 1px #000;
}

.logo img {
	height: 10vmin;
}

.bg1 {
	position: fixed;
	top: 15vmin;
	left: 0;
	width: 100%;
	bottom: 0;
	background-color: azure;
	opacity: 0.3;
	filter: alpha(opacity=30);
}

.bg2 {
	position: fixed;
	top: 25vmin;
	left: 0;
	width: 100%;
	height: 60vh;
	background-color: #24344B;
	background: linear-gradient( 
	        to right, 
	        rgba(0,0,0,0.8), 
	        rgba(0,0,0,0.8) 40vw, 
	        rgba(0,0,0,0) 45vw,
	        rgba(0,0,0,0) 55vw,
	        rgba(0,0,0,0.8) 60vw,
	        rgba(0,0,0,0.8));
	bbackground: linear-gradient( 
            to right, 
            rgba(0,0,0,0,0.8) 0%, 
            rgba(0,0,0,0,0.5) 10%, 
            rgba(0,0,0,0.4) 20%, 
            rgba(0,0,0,0.3) 30%, 
            rgba(0,0,0,1) 40%, 
            rgba(0,0,0,1) 50%,
            rgba(0,0,0,1) 60%, 
            rgba(0,0,0,0.3) 70%, 
            rgba(0,0,0,0.4) 80%, 
            rgba(0,0,0,0,0.5) 90%,
            rgba(0,0,0,0,0.8) 100%);
	ooopacity: 0.7;
	ofilter: alpha(opacity=70);
	display: none;
}

.container {
	position: fixed;
	top: 15vmin;
	left: 0;
	width: 100%;
	bottom: 0;
}

.container .title {
	font-size: 5vmin;
	line-height: 5vmin;
	height: 5vh;
	ppadding-left: 5vw;
	padding-top: 1vh;
	text-align: center;
}

.container .tt {
	font-weight: bolder;
	-webkit-text-stroke: 1px white;
}

.hero_box {
	width: 85vw;
	height: 60vh;
	margin-left: 7.5vw;
	-webkit-overflow-scrolling: touch;
}

.hero_list {
	mmargin-left: 5vmin;
}

.hero_list .hero_type {
	white-space: nowrap;
	overflow: auto;
	height: 10vh;
}

.hero_list a {
	ffloat: left;
	width: 14vmin;
	height: 14vmin;
	margin: 1vmin;
	background: none;
}

.hero_list a img {
	width: 14vmin;
	height: 14vmin;
	border: 0.5vw solid #258DF2;
	border-radius: 10px 0 10px 0;
}

.gray {
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
}

.tm {
	oopacity: 0.4;
	ffilter: alpha(opacity=40);
	/* 针对 IE8 以及更早的版本 */
}

.cborder {
	border: 5vw solid gold;
	border-radius: 10px 0 10px 0;
}

.but {
	border: 1px solid #d2a000;
	box-shadow: 0 1px 2px #fedd71 inset, 0 -1px 0 #a38b39 inset, 0 -2px 3px #fedd71 inset;
	background: -webkit-linear-gradient(top, #fece34, #d8a605);
	background: -moz-linear-gradient(top, #fece34, #d8a605);
	background: linear-gradient(top, #fece34, #d8a605);
}

.but:active {
	box-shadow: 1px 0 1px rgba(255, 255, 255, .8) inset, 1px 0 1px rgba(148, 131, 4, .9);
	background: -webkit-linear-gradient(top, #cf9d00, #d2a000);
	background: -moz-linear-gradient(top, #cf9d00, #d2a000);
	background: linear-gradient(top, #cf9d00, #d2a000);
}

.buttons {
	font-size: 4vmin;
	text-align: center;
	mmargin-left: 30vw;
}

.but1 {
	width: 30vmin;
	height: 9vmin;
	cursor: pointer;
	background-color: darkgoldenrod;
	line-height: 8vmin;
	margin: .85333rem auto 0.5vmin;
	color: #fff;
	text-decoration: none;
	font-size: 4vmin;
	ffloat: left;
}

.but1:hover {
	color: white;
	border-radius: 5px;
	background: #000000;
	opacity: 0.5;
}

.but2 {
	float: left;
	margin-left: 1vw;
}

.choose_box {
	position: fixed;
	top: 50%;
	left: 0;
	width: 100%;
	height: 40vh;
	margin-top: -20vh;
	text-align: center;
	display: none;
}

.choose_box img {
	width: 20vh;
	height: 20vh;
	border: 2px solid #258DF2;
	border-radius: 10px 0 10px 0;
	background-image: url(../img/avatar1.jpg);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-moz-background-size: 100% 100%;
}

.choose_box .hero_name {
	font-size: 5vmin;
	font-weight: bolder;
	color: #FFFFFF;
	margin-bottom: 2vh;
}

.choose_box .but3 {
	width: 30vmin;
	height: 9vmin;
	cursor: pointer;
	background-color: darkgoldenrod;
	line-height: 9vmin;
	color: #fff;
	text-decoration: none;
	font-size: 4vmin;
	display: none;
}

.copyright {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2vmin;
	font-size: 2vmin;
	line-height: 2vmin;
	color: #FFF;
	text-align: center;
}
